<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">考试管理</a></li>
        <li class="active">成绩管理</li>
    </ol>
</section>
<!-- Main content -->
<meta charset="utf-8">
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group" style="padding:10px">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">考试名称:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="keywords">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">考生学号:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="stuId">
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">考生姓名:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="name">
                    </div>
                </div>
           	</div>
            <div class="form-group" style="padding:10px">
            	<div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="grade">年级:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="grade">
                            <option  value="">请选择</option>
                            <option th:each="grade:${grades}" th:value="${grade}" th:text="${grade}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="insId">考试学院:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="insId">
                            <option  value="">请选择</option>
                            <option th:each="institute:${institutes}" th:value="${institute.id}" th:text="${institute.instituteName}"></option>
                        </select>
                    </div>
                </div>
            	<div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="classId">考试班级:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="classId">
                            <option  value="">请选择</option>
                            <option th:each="class:${classes}" th:value="${class.id}" th:text="${class.className}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group" style="padding:10px">
            	<div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="subject">考试课程:</label>
                    <div class="col-xs-8">
                        <select class="form-control" id="subjectId">
                            <option  value="">请选择</option>
                            <option th:each="subject:${subjects}" th:value="${subject.id}" th:text="${subject.name}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4">状态:</label>
                    <div class="col-xs-8">
                        <select id="status" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">未批阅</option>
                            <option value="1">及格</option>
                            <option value="2">不及格</option>
                            <option value="3">良好</option>
                            <option value="4">优秀</option>
                        </select>
                    </div>
                </div>
	            <div class="col-md-4 col-sm-6">
	            	<label class="control-label col-xs-4"></label>
	            	<div class="col-xs-8">
	                	<shiro:hasPermission name="exam:list">
	                    	<button type="button" id="btn_query" class="btn btn-primary pull-right">查 询</button>
	                    </shiro:hasPermission>
	                    <button type="button" id="btn_requery" class="btn btn-primary pull-right" style="margin-right:5px">重 填</button>
	                </div>
                </div>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="question:batchDelete">
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>
            </shiro:hasPermission>
        </div>
        <table id="table" style="table-layout:fixed"></table>
    </div>
</section>

<!-- 批阅模态框 -->
<div id="markingModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:1024px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-danger pull-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">问答题批阅</h4>
            </div>
            <div class="modal-body">
            	<div id="markOpenWindow"></div>
            </div>
        </div>
    </div>
</div>

<!-- 成绩详情模态框 -->
<div id="gradeDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" style="width:1024px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn btn-danger pull-right ml10" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <button type="button" class="btn btn-primary pull-right" onclick="exportWord()">导出Word</button>
                <h4 class="modal-title">考生试卷</h4>
            </div>
            <div class="modal-body">
            	<div id="gradeOpenWindow"></div>
            </div>
        </div>
    </div>
</div>

<script>
    var markFlag = "[[${@perms.hasPerm('grade:mark')}]]";
    var detailFlag = "[[${@perms.hasPerm('grade:detail')}]]";
    var deleteFlag = "[[${@perms.hasPerm('grade:delete')}]]";
    var columns = [
        {
            checkbox: true,

        },{
            field: 'examination',
            title: '考试名称',
            width : '24%',
            align : "center",
           	formatter: function (value) {
                   return value.title;
               }
        },{
            field: 'user',
            title: '考生学号',
            align : "center",
            width : '8%',
            formatter: function (value) {
                return value.username;
            }
        },{
            field: 'user',
            title: '考生姓名',
            width : '8%',
            align : "center",
           	formatter: function (value) {
                   return value.nickname;
            }
        },{
            field: 'examination',
            title: '总分',
            width : '5%',
            align : "center",
           	formatter: function (value) {
                   return value.totalScore;
               }
        },{
            field: 'autoResult',
            title: '选择题得分',
            align : "center",
            width : '8%',
        },{
            field: 'manulResult',
            title: '问答题得分',
            align : "center",
            width : '8%',
        },{
            field: 'result',
            title: '最终得分',
            align : "center",
            width : '8%',
        },{
            field: 'status',
            title: '状态',
            align : "center",
            width : '10%',
            formatter : function(status) {
            	var statusName = '';
                if(status == 0){
             	   statusName = '<span class="label label-warning">未批阅</span>';
                }else if(status == 1){
             	   statusName = '<span class="label label-success">及格</span>';
                }else if(status == 2){
             	   statusName = '<span class="label label-danger">不及格</span>';
                }else if(status == 3){
             	   statusName = '<span class="label label-primary">良好</span>';
                }else if(status == 4){
             	   statusName = '<span class="label label-info">优秀</span>';
                }
                return statusName;
            }
        },{
            field : 'operation',
            title : '操作',
            align : "center",
            width : '13%',
            class : 'min-width-100',
            formatter : function(value,
                                 row, index) {
                var mark = markFlag=="true"&&row.status==0 ? '<a class="btn btn btn-info btn-sm" onclick="markGrade('+row.id+')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 批阅</a>' : '';
                var detail = detailFlag=="true"&&row.status!=0 ? '<a class="btn btn-primary btn-sm" onclick="detailGrade('+row.id+')"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 查看</a>' : '';
                var del = deleteFlag=="true" ? '<a class="btn btn-danger btn-sm" onclick="deleteGrade('+row.id+')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</a>' : '';
                return mark + " " + detail + " " + del;
            }
        }];
    var options={
        id:"#table",
        url: '/grade/list',
        columns:columns,
        toolbar: '#toolbar',
        showRefresh: true,
        queryParams : queryParams
    }
    Core.initTable(options);

    /*查询参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit : params.limit, //页面大小
            offset : params.offset, //页码
            keywords : $("#keywords").val(),
            name : $("#name").val(),
            stuId : $("#stuId").val(),
            grade : $("#grade").val(),
            insId : $("#insId").val(),
            classId : $("#classId").val(),
            subjectId : $("#subjectId").val(),
            status : $("#status").val(),
            
        };
        return temp;
    }

    /*批阅*/
    function markGrade(id) {
    	Core.load("#markOpenWindow", "/grade/mark?id="+id,function(){
        	$("#markingModal").modal("show");
    	},2);
    }
    
    /*成绩详情*/
    function detailGrade(id) {
    	Core.load("#gradeOpenWindow", "/grade/detail?id="+id, function(){
    		$("#gradeDetailModal").modal({
    			closable: true, //必须点击按钮才能关闭
    		}).modal("show");
    	},2);
    }
    
    /* 导出试卷 */
    function exportWord(){
    	var examTitle = $("#examTitle").text();
    	var username = $("#username").val();
        $("#export_word").wordExport(username+'--'+examTitle);
    }
   
    /*删除*/
    function deleteGrade(id) {
        Core.confirm("确定删除该成绩？",function () {
            Core.postAjax("/grade/delete",{"id":id},function (data) {
                if(data.status==200){
                    Core.refreshTable("#table");
                }
                layer.msg(data.msg);
            })
        })
    }
    $(function () {
        /*查询*/
        $("#btn_query").click(function(){
            Core.refreshTable("#table");
        });
        /* 重置表单 */
        $("#btn_requery").click(function(){
        	$("#formSearch")[0].reset();
        });
        /*批量删除*/
        $("#btn_batch_delete").click(function(){
            var checkedRows= Core.selectMutiData("#table");
            if(checkedRows){
                Core.confirm("确定删除选中的"+checkedRows.length+"条记录？",function () {
                    var ids=[];
                    $.each(checkedRows, function (i, item) {
                        ids.push(item.id);
                    })
                    Core.postAjax("/grade/batch/delete", {"ids": ids}, function (data) {
                        if (data.status == 200) {
                            Core.refreshTable("#table");
                        }
                        layer.msg(data.msg);
                    })
                })
            }
        });
    });

</script>